const customerBaseInfoTemplate = `
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
      </div>
      <div>
      <el-form ref="form" :model="form" label-suffix=":" :disabled="$attrs.islook" label-width="110px" size="small">
        <el-row>
        <el-col :span="6">
        <el-form-item label="姓名" prop="studentName">
            <el-input v-model="form.studentName" placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
        <el-form-item label="身份证号" prop="idNo">
          <el-input v-model="form.idNo" :maxlength="18" placeholder=""></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="6">
        <el-form-item label="性别">
        <el-select v-model="form.sex" placeholder="请选择">
        <el-option label="男" value="0"></el-option>
        <el-option label="女" value="1"></el-option>
      </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="6">
        <el-form-item label="生日">
        <el-date-picker
        v-model="form.birthday"
        style="width: 100%;"
        value-format="yyyy-MM-dd"
        type="date"
        placeholder="选择日期">
      </el-date-picker>
        </el-form-item>
        </el-col>
        </el-row>
        <el-row>
        <el-col :span="6">
        <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" :maxlength="11" placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
        <el-form-item label="座机">
          <el-input v-model="form.telephone" placeholder=""></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="6">
        <el-form-item label="QQ">
          <el-input v-model="form.qq" placeholder=""></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="6">
        <el-form-item label="微信">
          <el-input v-model="form.wechat" placeholder=""></el-input>
        </el-form-item>
        </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" placeholder=""></el-input>
        </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="地区">
            <el-input v-model="form.address" placeholder=""></el-input>
          </el-form-item></el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
          <el-form-item label="行业">
          <el-input v-model="form.industry" placeholder=""></el-input>
        </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="工作单位">
            <el-input v-model="form.department" placeholder=""></el-input>
          </el-form-item></el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
          <el-form-item label="客户类型">
          <el-select v-model="form.customType" placeholder="请选择">
        <el-option label="一般客户" value="1"></el-option>
        <el-option label="意向客户" value="2"></el-option>
        <el-option label="成交客户" value="3"></el-option>
        <el-option label="其他" value="0"></el-option>
      </el-select>
        </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="意向报考类型">
          <el-select v-model="form.preType" placeholder="请选择">
          <el-option label="学历提升" value="1"></el-option>
          <el-option label="职业技能" value="2"></el-option>
          <el-option label="职称评审" value="3"></el-option>
          <el-option label="职业资格" value="4"></el-option>
        </el-select>
          </el-form-item></el-col>
        </el-row>
        <el-row>
        <el-col :span="24">
        <el-form-item label="备注">
          <el-input v-model="form.remark" type="textarea" placeholder=""></el-input>
        </el-form-item></el-col>
        </el-row>
      </el-form>
      </div>
    </el-card>
    <app-customer-individual v-if="id" :islook="$attrs.islook" :id="id" />
    
    <el-row type="flex" justify="center">
      <el-col style="text-align: center;" :span="6">
        <el-button v-if="!$attrs.islook" type="primary" @click="handleSave">保存</el-button>
        <el-button type="primary" @click="handleBack">返回</el-button>
      </el-col>
    </el-row>
  </div>
`;

var validateIdNo = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入身份证号码'));
  } else {
    const isValid =
      /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(
        value
      );
    if (!isValid) {
      callback(new Error('身份证号码有误'));
    } else {
      callback();
    }
  }
};

var validatePhone = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入手机号码'));
  } else {
    const isValid = /^1[3456789]\d{9}$/.test(value);
    if (!isValid) {
      callback(new Error('手机号码有误'));
    } else {
      callback();
    }
  }
};

var validateEmail = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入邮箱'));
  } else {
    const isValid =
      /^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/.test(
        value
      );
    if (!isValid) {
      callback(new Error('邮箱格式有误'));
    } else {
      callback();
    }
  }
};

Vue.component('app-customer-base-info', {
  name: 'app-customer-base-info',
  template: customerBaseInfoTemplate,
  props: ['id', 'isLook'],
  data() {
    return {
      form: {
        studentName: '', //学生姓名
        sex: '',
        idNo: '', //身份证号码
        address: '', //地址
        wechat: '', //微信
        qq: '',
        email: '',
        phone: '', //手机号
        preType: '', //意向报考类型
        teamStatus: '', //1团队可查
        birthday: '', //生日
        companyStatus: '', //1所有人可查
        telephone: '', //座机
        department: '', //工作单位
        industry: '', //行业
        remark: '', //备注
        customType: '', //客户类型
        status: '', //0无效数据  1有效数据
      },
      rules: {
        studentName: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        idNo: [
          {
            required: true,
            validator: validateIdNo,
            trigger: 'blur',
          },
        ],
        phone: [
          {
            required: true,
            validator: validatePhone,
            trigger: 'blur',
          },
        ],
        email: [
          {
            required: true,
            validator: validateEmail,
            trigger: 'blur',
          },
        ],
      },
      isVisible: false,
      reverse: true,
      activities: [
        {
          content: '活动按期开始',
          timestamp: '2018-04-15',
          color: '#0099ff',
        },
        {
          content: '通过审核',
          timestamp: '2018-04-13',
        },
        {
          content: '创建成功',
          timestamp: '2018-04-11',
        },
      ],
    };
  },
  created() {
    if (this.id) {
      $.ajax({
        url: `${baseUrl}preStudent/getPreStudent?id=${this.id}`,
        method: 'Get',
        contentType: 'application/json;charset=UTF-8',
        headers: {
          Authorization: JSON.parse(localStorage.getItem('userInfo')).token,
        },
        success: (response) => {
          if (response.code === 200) {
            this.form = response.data;
          }
        },
        error: (err, res, res1) => {
          this.$message({
            message: err.responseJSON.message || '网络错误',
            type: 'error',
          });
        },
      });
    }
  },
  methods: {
    handleSave() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.save();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleBack() {
      const backName = getQuery('backName');
      console.log(`backName`, backName);
      location.href = `../customer/${backName || 'individual'}.html`;
    },
    save() {
      let data = this.form;
      let actionUrl = 'addPreStudent';
      if (this.id) {
        actionUrl = 'modifyPreStudent';
      }
      $.ajax({
        url: `${baseUrl}preStudent/${actionUrl}`,
        method: 'Post',
        contentType: 'application/json;charset=UTF-8',
        data: JSON.stringify(
          data
          // preStudent: data,
        ),
        headers: {
          Authorization: JSON.parse(localStorage.getItem('userInfo')).token,
        },
        success: (data) => {
          this.$message({
            message: `保存成功`,
            type: 'success',
          });
          this.handleBack();
        },
        error: (err, res, res1) => {
          this.$message({
            message: err.responseJSON.message || '网络错误',
            type: 'error',
          });
        },
      });
    },
  },
});
